import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ScrollArea } from '@/components/ui/scroll-area';
import { cn, generateRandomId } from '@/lib/utils';
import { useSettingsStore } from '@/store';
import { useId } from 'react';
export default function PublicSeting({
  className,
  ...props
}: {
  className: string;
} & React.HTMLAttributes<HTMLDivElement>) {
  const publicSettings = useSettingsStore((state) => state.publicSettings);
  const dispatch = useSettingsStore((state) => state.dispatch);
  const id = useId();

  return (
    <div {...props} className={cn(className, 'flex flex-col')}>
      <div className="grow relative flex flex-col">
        <ScrollArea className="border rounded-sm grow h-full w-full p-2 pt-2 overflow-auto [&_[data-radix-scroll-area-viewport]]:absolute [&_[data-radix-scroll-area-viewport]]:!w-auto [&_[data-radix-scroll-area-viewport]]:right-2 [&_[data-radix-scroll-area-viewport]]:left-2">
          <div className="flex px-3 gap-2 items-center py-4">
            <Label className="whitespace-nowrap mb-0" htmlFor={id + '-public-interval'}>
              发布时的间隔时间(ms):
            </Label>
            <Input
              value={publicSettings.publicInterval}
              type="number"
              step={0.1}
              onChange={(event) => {
                dispatch({
                  type: 'update',
                  update(draftState) {
                    draftState.publicSettings.publicInterval = +event.target.value;
                  },
                });
              }}
              id={id + '-public-interval'}
              className="h-10 w-auto rounded-md border border-input px-3 py-2"
            />
          </div>
        </ScrollArea>
      </div>
    </div>
  );
}
